<template>
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-8 ml-auto mr-auto">
          <div class="card">
            <div class="header text-center">
              <h4 class="title">Light Bootstrap Dashboard PRO</h4>
              <p class="category">Are you looking for more components? Please check our Premium Version of Light Bootstrap Dashboard.</p>
              <br>
            </div>
            <div class="content table-responsive table-upgrade">
              <table class="table">
                <thead>
                <tr><th></th>
                  <th class="text-center">Free</th>
                  <th class="text-center">PRO</th>
                </tr></thead>
                <tbody>
                <tr>
                  <td>Components</td>
                  <td>16</td>
                  <td>160+</td>
                </tr>
                <tr>
                  <td>Plugins</td>
                  <td>4</td>
                  <td>17+</td>
                </tr>
                <tr>
                  <td>Example Pages</td>
                  <td>4</td>
                  <td>25+</td>
                </tr>
                <tr>
                  <td>Documentation</td>
                  <td><i class="fa fa-check text-success"></i></td>
                  <td><i class="fa fa-check text-success"></i></td>
                </tr>
                <tr>
                  <td>SASS Files</td>
                  <td><i class="fa fa-check text-success"></i></td>
                  <td><i class="fa fa-check text-success"></i></td>
                </tr>
                <tr>
                  <td>Login/Register/Lock Pages</td>
                  <td><i class="fa fa-times text-danger"></i></td>
                  <td><i class="fa fa-check text-success"></i></td>
                </tr>
                <tr>
                  <td>Premium Support</td>
                  <td><i class="fa fa-times text-danger"></i></td>
                  <td><i class="fa fa-check text-success"></i></td>
                </tr>
                <tr>
                  <td></td>
                  <td>Free</td>
                  <td>Just $49</td>
                </tr>
                <tr class="last-row">
                  <td></td>
                  <td>
                    <a href="#" class="upgrade-table-btn btn btn-b btn-round btn-fill btn-default disabled">Current Version</a>
                  </td>
                  <td>
                    <a target="_blank" href="http://www.creative-tim.com/product/vue-light-bootstrap-dashboard-pro/?ref=vue-lbdupgrade" class="upgrade-table-btn btn btn-round btn-fill btn-info">Upgrade to PRO</a>
                  </td>
                </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {}
</script>
<style lang="scss">
  .upgrade-table-btn {
    width: 160px;
    &:first-child {
      margin-right: 10px;
    }
  }
</style>
